<template>
	<scroll-view scroll-x class="bg-white nav " scroll-with-animation :class="isbool(center)?'text-center':''"
	 :scroll-left="scrollLeft">
		<view class="cu-item pos-r" @tap="tabSelect(index)" :class="index==TabCur? color + ' cur':''" v-for="(item,index) in names"
		 :key="index" :data-id="index">
			{{item}}
			<ripple></ripple>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			names: '',
			color: {
				type: String,
				default: "text-green"
			},
			center: {
				type: Boolean,
				default: false
			},
			value: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			tabSelect(index) {
				this.TabCur = index
				this.$emit('input', index)
				this.$emit('change', index)
			}
		},
		watch: {

			value(index) {
				this.log(index)
				this.TabCur = index
			}
		}
	}
</script>

<style>

</style>
